<template>
  <view class="wrap">
    <view class="title">订单取消</view>
    <view class="require text">请选择取消订单的原因：</view>
    <view v-for="(item, index) in reasonList" :key="index" class="item">
      <text class="text">{{ item }}</text>
      <text class="checkbox" :class="{ checked: reason === item }" @tap="onChange(item)"></text>
    </view>

    <view class="btns">
      <button class="btn cancel-btn" @tap="onCancel">取消</button>
      <button class="btn confirm-btn" @tap="onConfirm">确认</button>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const emit = defineEmits(['confirm', 'close'])

const reasonList = ref([
  '商品无货',
  '不想要了',
  '商品信息填错了',
  '地址信息填写错误',
  '商品降价',
  '其它',
])
const reason = ref('')

const onChange = (item: string) => {
  reason.value = item
}

const onCancel = () => {
  emit('close')
}

const onConfirm = () => {
  emit('confirm', reason.value)
}
</script>

<style lang="scss" scoped>
@import '../styles/cancelReasonPanel';
</style>
